<script setup lang="ts">
export interface Props {
  productDetail?: ProductDetail | null;
  loading: boolean;
}

type ProductDetail = {
  className: string;
  category: string;
  fields?: Array<{
    fieldName: string;
    fieldType: string;
    fullType: string;
    description: string;
  }>;
  description: string;
};

const visible = defineModel<boolean>('visible');

const props = withDefaults(defineProps<Props>(), {
  productDetail: null,
  trialData: null,
  trialResult: null
});

const emit = defineEmits<{
  (e: 'cancel'): void;
}>();

// 删除重复的defineEmits调用

const handleCancel = () => {
  emit('cancel');
};
</script>

<template>
  <AModal
    v-model:open="visible"
    :title="`产品详情 - ${props.productDetail?.className || ''}`"
    width="1200px"
    :footer="null"
    :body-style="{ padding: '16px' }"
    @cancel="handleCancel"
  >
    <div v-if="props.loading" class="py-4 text-center">加载中...</div>
    <div v-else-if="props.productDetail" class="product-detail-container">
      <div v-if="props.productDetail.fields && props.productDetail.fields.length > 0" class="fields-table-container">
        <ATable
          :columns="[
            {
              title: '字段名',
              dataIndex: 'fieldName',
              key: 'fieldName',
              width: 160,
              fixed: 'left'
            },
            {
              title: '类型',
              dataIndex: 'fieldType',
              key: 'fieldType',
              width: 100
            },
            {
              title: '完整类型',
              dataIndex: 'fullType',
              key: 'fullType',
              width: 180,
              ellipsis: true
            },
            {
              title: '描述',
              dataIndex: 'description',
              key: 'description',
              ellipsis: true
            }
          ]"
          :data-source="props.productDetail.fields"
          :pagination="{
            pageSize: 20,
            showSizeChanger: true,
            showQuickJumper: true
          }"
          :scroll="{ x: 600, y: 500 }"
          size="small"
          bordered
        />
      </div>
      <div v-else class="no-fields">
        <AEmpty description="暂无字段信息" />
      </div>
    </div>
  </AModal>
</template>

<style scoped>
/* 基础工具类 */
.text-center {
  text-align: center;
}
.py-4 {
  padding: 16px 0;
}
.mt-4 {
  margin-top: 16px;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.mr-1 {
  margin-right: 4px;
}
.mb-4 {
  margin-bottom: 16px;
}
.mb-3 {
  margin-bottom: 12px;
}
.mt-2 {
  margin-top: 8px;
}

/* 布局组件样式 */
.trial-calculation-section {
  background: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 16px;
}

.trial-data-display {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  padding: 12px;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.trial-data-display pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #24292e;
}

.product-detail-container {
  display: flex;
  gap: 24px;
  min-height: 600px;
}

.left-panel {
  flex: 0 0 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
.right-panel {
  flex: 1;
  min-width: 0;
}

.section-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.basic-info-section,
.trial-section,
.fields-section {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
}

.trial-description {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: #8c8c8c;
  text-align: center;
}

.fields-table-container {
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
}
.no-fields {
  text-align: center;
  padding: 40px 20px;
  color: #8c8c8c;
}

.trial-result-success,
.trial-result-error {
  border-radius: 6px;
  padding: 12px;
}

.trial-result-success {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.trial-result-error {
  background: #fff2f0;
  border: 1px solid #ffccc7;
}

.trial-loading {
  text-align: center;
  padding: 40px 20px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

/* 暗色主题适配 */
.dark .trial-calculation-section,
.dark .trial-loading {
  background: #2a2a2a;
  border-color: #404040;
}

.dark .trial-data-display {
  background: #1e1e1e;
  border-color: #404040;
}
.dark .trial-data-display pre {
  color: #e6e6e6;
}
.dark .section-title {
  color: #e6e6e6;
}
.dark .basic-info-section,
.dark .trial-section,
.dark .fields-section {
  background: #1f1f1f;
  border-color: #404040;
}
.dark .fields-table-container {
  border-color: #404040;
}
.dark .trial-result-success {
  background: #162312;
  border-color: #274916;
}
.dark .trial-result-error {
  background: #2a1215;
  border-color: #58181c;
}
</style>
